/**
 * Created by Administrator on 2018/4/16 0016.
 */
import config from '../../../../../config/config.js'

// components
import TimeSpinner from '../../base/time-spinner.vue'
import Confirm from '../../base/confirm.vue'
import Options from '../../time-mixins'
// mixins
import Mixin from '../panel-mixin'
import Locale from '../../../../../mixins/locale.js'
// tools
import { initTimeDate, formatDateLabels } from '../../util'
// prefix
const prefixCls = config.prefix + '-picker-panel'
const timePrefixCls = config.prefix + '-time-picker'
// module
export default {
  name: 'RangeTimePickerPanel',
  mixins: [Mixin, Locale, Options],
  components: { TimeSpinner, Confirm },
  props: {
    format: {
      type: String,
      default: 'HH:mm:ss'
    },
    value: {
      type: Array,
      required: true
    }
  },
  data () {
    const [dateStart, dateEnd] = this.value.slice()
    return {
      prefixCls: prefixCls,
      timePrefixCls: timePrefixCls,
      showDate: false,
      dateStart: dateStart || initTimeDate(),
      dateEnd: dateEnd || initTimeDate()
    }
  },
  computed: {
    classes () {
      return [
                `${prefixCls}-body-wrapper`,
                `${timePrefixCls}-with-range`,
                {
                  [`${timePrefixCls}-with-seconds`]: this.showSeconds
                }
      ]
    },
    showSeconds () {
      return !(this.format || '').match(/mm$/)
    },
    leftDatePanelLabel () {
      return this.panelLabelConfig(this.date)
    },
    rightDatePanelLabel () {
      return this.panelLabelConfig(this.dateEnd)
    }
  },
  watch: {
    value (dates) {
      const [dateStart, dateEnd] = dates.slice()
      this.dateStart = dateStart || initTimeDate()
      this.dateEnd = dateEnd || initTimeDate()
    }
  },
  methods: {
    panelLabelConfig (date) {
      const locale = this.t('i.locale')
      const datePanelLabel = this.t('i.datepicker.datePanelLabel')
      const { labels, separator } = formatDateLabels(locale, datePanelLabel, date || initTimeDate())
      return [labels[0].label, separator, labels[1].label].join('')
    },
    handleChange (start, end, emit = true) {
      const dateStart = new Date(this.dateStart)
      let dateEnd = new Date(this.dateEnd)

      // set dateStart
      Object.keys(start).forEach(type => {
        dateStart[`set${Artery.firstUpperCase(type)}`](start[type])
      })

      // set dateEnd
      Object.keys(end).forEach(type => {
        dateEnd[`set${Artery.firstUpperCase(type)}`](end[type])
      })

      // judge endTime > startTime?
      if (dateEnd < dateStart) dateEnd = dateStart

      if (emit) this.$emit('on-pick', [dateStart, dateEnd], true)
    },
    handleStartChange (date) {
      this.handleChange(date, {})
    },
    handleEndChange (date) {
      this.handleChange({}, date)
    },
    updateScroll () {
      this.$refs.timeSpinner.updateScroll()
      this.$refs.timeSpinnerEnd.updateScroll()
    }
  },
  mounted () {
    if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true
  }
}
